import React from 'react'
import { Form, Icon, Input, Button, Spin } from 'antd'
import Wrapper from './Wrapper'
import { Row, Col } from 'antd'
import styles from './form.scss'

const FormItem = Form.Item;

const antIcon = <Icon type="loading" spin />

const LoginForm = (props) => {
    const { getFieldDecorator } = props.form;
    const { validatePictureData, loginButtonLoading } = props

    return (
      <Row type="flex" justify="center" style={{paddingTop: 50, paddingLeft: 24, paddingRight: 24}} >
        <Col span={24}>
          <Row type="flex" align="middle" className={styles['header']}>
            <Col span={12}>
              <div className={styles['login-title']}>登录</div>
            </Col>
            <Col span={12}>
              <Row type="flex" justify="end">
                <Button className={styles['register-button']} onClick={props.onRegister} type="primary">注册新账号</Button>
              </Row>
            </Col>
          </Row>
        </Col>
        <Col span={24}>
        <Form onSubmit={
          (e) => {
            e.preventDefault();
            e.stopPropagation();
            props.form.validateFields((error) => {
                !error && props.onLogin()
              })
            } 
        } className={styles['login-form']} hideRequiredMark>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="账号" colon={false}>
            {getFieldDecorator('account', {
              rules: [{ required: true, message: '请输入账号!' }],
            })(
              <Input 
                onChange={props.onChangeAccount} 

                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                placeholder="账号" 
              />
            )}
          </FormItem>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="密码" colon={false}>
            {getFieldDecorator('passWord', {
              rules: [{ required: true, message: '请输入密码!' }],
            })(
              <Input 
                onChange={props.onChangePassWord} 
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                type="password" 
                placeholder="密码" 
              />
            )}
          </FormItem>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}}  label="验证码" colon={false}>
              <Row gutter={24}>
                <Col span={12}>
                  {getFieldDecorator('validateCode', {
                    rules: [{ required: true, message: '请输入验证码!' }],
                  })(
                    <Input 
                      onChange={props.onChangeValidateCode} 
                      prefix={<Icon type="key" 
                      style={{ color: 'rgba(0,0,0,.25)' }} />} 
                      placeholder="验证码" 
                    />
                  )}
                </Col>
                <Col span={12}>
                  <Spin spinning={props.spinningValiCoder} indicator={antIcon} size="default">
                    <img 
                      src={validatePictureData} 
                      onClick={props.onValidatePicture} 
                      style={{ display:'block', height: 39}}
                      alt=""
                    />
                  </Spin>
                </Col>
              </Row>
          </FormItem>
          <FormItem>
            <Row gutter={48} type="flex" justify="start">
              <Col span={24}>
                <Button 
                  type="primary"
                  htmlType="submit"
                  style={{width:'100%', height: 38}} 
                  className={styles['login-form-button']}
                  loading={loginButtonLoading}
                >
                  登录
                </Button>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </Col>
      </Row>
    )

} 

let LF = Form.create({
  mapPropsToFields(props){
    return {
      account:Form.createFormField({
        value: props.account
      }),
      passWord:Form.createFormField({
        value: props.passWord
      }),
      validateCode:Form.createFormField({
        value: props.validateCode
      })
    }
  }
})(LoginForm)

LF = Wrapper(LF)

export default LF